<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
			* {
				margin: 0;
				padding: 0;
			}
			ul {
				list-style: none;
			}
			div {
				width: 800px;
				height: 175px;
				margin: 200px auto;
				overflow: hidden;
			}
			ul {
				width: 1600px;
				height: 175px;
				animation: moving 3s linear infinite;
			}
			ul li {
				float: left;
			}
			li img {
				width: 200px;
				height: 175px;
				
			}
			div:hover ul{
				animation-play-state:paused;
			}
			@keyframes moving {
				from {
					transform: translate3d(0, 0, 0);
				}
				to {
					transform: translate3d(-800px, 0, 0);

				}
			}

        </style>
    </head>
    <body>
    <div>
    	<ul>
    		<li><img src="images/1.jpg"></li>
    		<li><img src="images/2.jpg" alt=""></li>
    		<li><img src="images/3.jpg" alt=""></li>
    		<!-- <li><img src="images/4.jpg" alt=""></li> -->
    		<li><img src="images/5.jpg" alt=""></li>

    		<li><img src="images/1.jpg"></li>
    		<li><img src="images/2.jpg" alt=""></li>
    		<li><img src="images/3.jpg" alt=""></li>
    		<!-- <li><img src="images/4.jpg" alt=""></li> -->
    		<li><img src="images/5.jpg" alt=""></li>
    	</ul>
    </div>
    </body>
</html>